<template>
  <view class="wrap">
    <view class="title">
      依据国家相关法律要求，互联网就医实行实名制，为保证顺利享受健康服务，请填写真实信息
    </view>
    <view class="list">
      <view class="item">
        <view class="item-title">选择认证方式</view>
        <view class="right" @tap="authenticationFun">
          <text class="name">{{ state.authenticationName }}</text>
          <img class="img" src="@/static/image/hmm/4.png" alt="" />
        </view>
      </view>
      <view class="item">
        <view class="item-title">真实姓名</view>
        <input
          class="input"
          type="text"
          v-model="state.name"
          placeholder="请输入真实姓名"
          placeholder-style="color: #999;font-size: 30rpx;"
        />
      </view>
      <view class="item">
        <view class="item-title">证件号</view>
        <input
          class="input"
          type="idcard"
          v-model="state.idCard"
          placeholder="认证后将无法修改，请谨慎填写"
          placeholder-style="color: #999;font-size: 30rpx;"
        />
      </view>
      <view class="item">
        <view class="item-title">手机号</view>
        <input
          class="input inputTel"
          type="number"
          disabled
          :value="stars(state.tel)"
          placeholder="请输入真实手机号"
          placeholder-style="color: #999;font-size: 30rpx;"
        />
      </view>
      <view class="item">
        <view class="item-title">验证码</view>
        <view class="codeWrap">
          <input
            class="code"
            type="number"
            maxlength="6"
            v-model="state.code"
            placeholder="请输入验证码"
            placeholder-style="color: #999;font-size: 30rpx;"
          />
          <text v-if="state.isClick" class="send" @tap="sendFun">发送验证码</text>
          <text v-else class="send on">重新发送（{{ state.time }}）</text>
        </view>
      </view>
    </view>
    <view class="protocol">
      <image v-if="state.showPopover" @tap="readFun" class="img" src="@/static/image/hmm/2.png" />
      <image v-else class="img" @tap="readFun" src="@/static/image/hmm/3.png" />
      <text class="agree" @tap="readFun">阅读并同意</text>
      <text class="protocolTitle" @tap="protocolFun">《关于身份识别隐私信息处理说明》</text>
    </view>
    <view class="authenticationBtn">
      <view class="wraps">
        <view class="cancel" @tap="cancel">取消</view>
        <view class="goAuthentication" @tap="sure">去实名认证</view>
      </view>
    </view>
    <up-action-sheet
      :actions="state.authenticationList"
      title="认证方式"
      :show="state.authenticationWayShow"
      @select="selectClick"
      :closeOnClickOverlay="true"
      @close="close"
    >
    </up-action-sheet>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { realAuth, sendPhoneCode } from '@/api/login/index'
import { base_info } from '@/api/moreMessage'
import store from '@/store'
import { onLoad, onHide, onShow } from '@dcloudio/uni-app'
import { validatorIdcard } from '@/utils/tools'

const state = reactive({
  authenticationWayShow: false,
  //   authenticationId: '',
  //   authenticationName: '',
  //   默认身份证
  authenticationId: '1',
  authenticationName: '居民身份证',
  authenticationList: [
    {
      name: '居民身份证',
      id: '1'
    }
    // {
    //   name: '驾驶证',
    //   id: '2'
    // },
    // {
    //   name: '选项三',
    //   id: '3'
    // }
  ],
  name: '',
  idCard: '',
  isReadOnly: true,
  tel: '',
  code: '',
  timeQuestions: null,
  isClick: true,
  time: '',
  showPopover: true
})
const userInfo = ref({})
onLoad(() => {
  init()
})

onHide(() => {
  clearInterval(state.timeQuestions)
  state.timeQuestions = null
  state.isClick = true
})
const init = () => {
  state.tel = store.state.userInfo.phone || ''
  userInfo.value = store.state.userInfo
}

const stars = (val) => {
  return val.slice(0, 3) + '****' + val.slice(7)
}

const selectClick = (item) => {
  state.authenticationWayShow = false
  state.authenticationName = item.name
  state.authenticationId = item.id
}

const authenticationFun = () => {
  state.authenticationWayShow = true
}
const close = () => {
  state.authenticationWayShow = false
}
//获取验证码
const sendFun = () => {
  let phoneReg = /^1[3456789]\d{9}$/
  if (phoneReg.test(state.tel)) {
    sendVerifyCode()
    uni.showLoading({
      title: '加载中'
    })
    let param = {
      ...userInfo.value
    }
    sendPhoneCode(param).then((res: any) => {
      uni.hideLoading()
      if (res.code == 0) {
        uni.showToast({
          title: '验证码:' + res.data,
          duration: 3000
        })
      } else {
        state.time = ''
        state.isClick = true
        clearInterval(state.timeQuestions)
        state.timeQuestions = null
      }
    })
  } else {
    if (!state.tel) {
      uni.showToast({
        title: '手机号码不能为空',
        icon: 'none',
        //显示持续时间为 2秒
        duration: 2000
      })
    } else {
      uni.showToast({
        title: '手机号码格式不正确',
        icon: 'none',
        //显示持续时间为 2秒
        duration: 2000
      })
    }
  }
}
const sendVerifyCode = () => {
  if (state.isClick == true) {
    state.isClick = false
    let s = 60
    state.time = s + 's'
    state.timeQuestions = setInterval(() => {
      s--
      state.time = s + 's'
      if (s < 0) {
        state.time = ''
        state.isClick = true
        clearInterval(state.timeQuestions)
      }
    }, 1000)
  }
}
const readFun = () => {
  state.showPopover = !state.showPopover
}
const protocolFun = () => {
  console.log(123)
  //   uni.navigateTo({
  //     url: '/pages/login/authorization'
  //   })
}
const cancel = () => {
  uni.navigateBack({
    delta: 1
  })
}
const sure = () => {
  if (state.showPopover == true) {
    uni.showToast({
      title: '请勾选用户服务协议和隐私政策',
      icon: 'none',
      position: 'top',
      //显示持续时间为 2秒
      duration: 2000
    })
    return false
  }
  if (!state.name || !state.tel || !state.idCard || !state.code || !state.authenticationId) {
    uni.showToast({
      title: '请完善实名认证信息',
      icon: 'none',
      position: 'top',
      //显示持续时间为 2秒
      duration: 2000
    })
    return false
  }
  if (!validatorIdcard(state.idCard)) {
    uni.showToast({
      title: '请输入正确身份证号码',
      icon: 'none',
      position: 'top',
      //显示持续时间为 2秒
      duration: 2000
    })
    return false
  }
  userInfo.value.idType = state.authenticationName
  userInfo.value.idNo = state.idCard
  userInfo.value.userName = state.name
  userInfo.value.phone = state.tel
  userInfo.value.code = state.code
  let params = {
    ...userInfo.value
  }
  uni.showLoading({
    title: '实名认证中...'
  })
  realAuth(params).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      userInfo.value = res.data
      let params = {
        userId: res.data.userId,
        empi: res.data.empi
      }
      base_info(params).then((ret) => {
        userInfo.value.patientInfo = ret.data
        store.commit('SET_USERINFO', res.data)
        // uni.setStorageSync('userInfo', JSON.stringify(res.data))
        uni.showToast({
          title: '认证成功!',
          icon: 'success',
          duration: 2000,
          complete: (res) => {
            if (!userInfo.value.isAuthorized) {
              uni.navigateTo({
                url: '/pages/login/authorization'
              })
            } else {
              uni.reLaunch({
                url: '/pages/dataFix/index'
              })
            }
          }
        })
      })
    }
  })
}
</script>

<style lang="scss" scoped>
.wrap {
  .title {
    font-size: 28rpx;
    color: #ff7d00;
    padding: 16rpx 32rpx;
    background: #fff7e8;
  }
  .list {
    margin: 24rpx 32rpx;
    background: #fff;
    border-radius: 16rpx;
    .item {
      margin: 0 32rpx;
      position: relative;
      font-size: 30rpx;
      color: #222;
      border-bottom: 1rpx solid #e5e6eb;
      &:nth-last-child(1) {
        border: 0;
      }
      .item-title {
        height: 108rpx;
        line-height: 108rpx;
        font-weight: 700;
        display: inline-block;
      }
      .right {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        height: 108rpx;
        line-height: 108rpx;
        min-width: 150rpx;
        text-align: right;
        .name {
          display: inline-block;
          vertical-align: middle;
          padding-left: 20rpx;
        }
        .img {
          display: inline-block;
          vertical-align: middle;
          width: 40rpx;
          height: 40rpx;
        }
      }
      .input {
        box-sizing: border-box;
        display: inline-block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        height: 108rpx;
        line-height: 108rpx;
        width: calc(100% - 100rpx);
        text-align: right;
        &.inputTel {
          color: #999;
        }
      }
      .codeWrap {
        box-sizing: border-box;
        display: inline-block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        height: 108rpx;
        line-height: 108rpx;
        width: calc(100% - 100rpx);
        text-align: right;
        font-size: 30rpx;
        .code {
          display: inline-block;
          vertical-align: middle;
          margin-right: 8rpx;
          width: 200rpx;
        }
        .send {
          display: inline-block;
          vertical-align: middle;
          color: #00d1b6;
          &.on {
            color: #999;
          }
        }
      }
    }
  }
  .protocol {
    margin: 28rpx 32rpx;
    font-size: 24rpx;
    color: #666;
    .img {
      display: inline-block;
      vertical-align: middle;
      width: 40rpx;
      height: 40rpx;
      padding-right: 10rpx;
    }
    .agree {
      display: inline-block;
      vertical-align: middle;
    }
    .protocolTitle {
      display: inline-block;
      vertical-align: middle;
      color: #00d1b6;
    }
  }
  .authenticationBtn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    .wraps {
      padding: 0 32rpx;
      padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
      padding-top: 24rpx;
      text-align: center;
      font-size: 32rpx;
      color: #666;
      .cancel {
        width: calc(50% - 20rpx);
        display: inline-block;
        vertical-align: middle;
        margin-right: 24rpx;
        border: 1rpx solid #cfcfcf;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 44rpx;
      }
      .goAuthentication {
        width: calc(50% - 20rpx);
        display: inline-block;
        vertical-align: middle;
        border: 1px solid #00d1b6;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 44rpx;
        background: #00d1b6;
        font-weight: bold;
        color: #fff;
      }
    }
  }
  ::v-deep .uicon-close {
    font-size: 32rpx !important;
    line-height: 32rpx !important;
  }
}
</style>
